<template>
  <view>
    <l-background />
    <view class="margin-top-16">
      <l-form-cell
        v-for="(item,index) in formList"
        :key="index"
        v-model="form[item.attr]"
        :label="item.placeholder"
        :placeholder="'请输入' + item.placeholder"
        :must="item.must"
        :maxlength="item.maxlength"
        :type="item.type"
        :unlined="item.attr==='remark'"
      />
      <view class="button">
        <tui-button @click="save">{{ bankCardInfo ? '编辑银行卡' : '新增银行卡' }}</tui-button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { formVerify } from '@/common/util'
import { putObj, addObj } from '@/common/api/user.js'
export default {
  data() {
    return {
      form: {
        id: '',
        accountName: '',
        bankCardNumber: '',
        bankName: '',
        bankBranch: '',
        remark: ''
      },
      formList: [
        { attr: 'accountName', placeholder: '账户名称', must: true, type: 'text', maxlength: 30 },
        { attr: 'bankCardNumber', placeholder: '银行卡号', must: true, type: 'number', maxlength: 19 },
        { attr: 'bankName', placeholder: '银行名称', must: true, type: 'text', maxlength: 30 },
        { attr: 'bankBranch', placeholder: '开户行', must: true, type: 'text', maxlength: 30 },
        { attr: 'remark', placeholder: '备注', must: false, type: 'text', maxlength: 50 }
      ]
    }
  },
  computed: {
    ...mapGetters({
      bankCardInfo: 'bankCardInfo'
    })
  },
  created() {
    uni.setNavigationBarTitle({
      title: this.bankCardInfo ? '编辑银行卡' : '新建银行卡'
    })
    if (this.bankCardInfo) Object.assign(this.form, this.bankCardInfo)
  },
  methods: {
    async save() {
      if (formVerify(this.form, this.formList)) {
        let api = addObj
        if (this.bankCardInfo) api = putObj
        const [err, res] = await api(this.form)
        if (!this.$http.errorCheck(err, res)) return false
        this.jump()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.list-item{
  border-bottom:2rpx solid $color-border;
  height:106rpx;
}
.button{
  margin-top:80rpx;
  padding:0 26rpx;
}
</style>
